<template>
  <view class="cooperation-page">
    <!-- 顶部导航 -->
    <!-- <view class="nav-header">
      <view class="nav-back" @click="goBack">
        <uni-icons type="left" size="20" color="#333"></uni-icons>
      </view>
      <text class="nav-title">商务合作</text>
      <view class="nav-placeholder"></view>
    </view> -->
    <CustomNavBar 
      title="订单详情" />
    <!-- 页面内容 -->
    <view class="content">
      <!-- 欢迎标题 -->
      <view class="welcome-section">
        <text class="welcome-subtitle">感谢您关注听鸽共享充电桩</text>
        <text class="welcome-title">欢迎提交您的合作意向</text>
      </view>

      <!-- 表单区域 -->
      <view class="form-section">
        <!-- 合作单位名称 -->
        <view class="form-item">
          <text class="form-label">合作单位名称</text>
          <input
            class="form-input"
            v-model="formData.companyName"
            placeholder="请输入"
            placeholder-class="input-placeholder"
          />
        </view>

        <!-- 联系人 -->
        <view class="form-item">
          <text class="form-label">联系人</text>
          <input
            class="form-input"
            v-model="formData.linkman"
            placeholder="请输入"
            placeholder-class="input-placeholder"
          />
        </view>

        <!-- 职务 -->
        <view class="form-item">
          <text class="form-label">职务</text>
          <input
            class="form-input"
            v-model="formData.position"
            placeholder="请输入"
            placeholder-class="input-placeholder"
          />
        </view>

        <!-- 手机号码 -->
        <view class="form-item">
          <text class="form-label">手机号码</text>
          <input
            class="form-input"
            v-model="formData.phone"
            placeholder="请输入"
            placeholder-class="input-placeholder"
            type="number"
          />
        </view>

        <!-- 邮箱 -->
        <view class="form-item">
          <text class="form-label">邮箱</text>
          <input
            class="form-input"
            v-model="formData.email"
            placeholder="请输入"
            placeholder-class="input-placeholder"
          />
        </view>
      </view>

      <!-- 计划合作事项 -->
      <view class="textarea-section">
        <view class="textarea-header">
          <text class="textarea-title">计划合作事项</text>
        </view>
        <textarea
          class="textarea-input"
          v-model="formData.content"
          placeholder="请输入计划合作事项"
          placeholder-class="textarea-placeholder"
          maxlength="500"
        ></textarea>
        <image class="car-icon" src="/static/images/activity_pile/car.png"  ></image>
      </view>

      <!-- 合作预期 -->
       <view class="expect-section">
        <view class="expect-header">
          <text class="expect-title">合作预期</text>
        </view>
        <input
            class="expect-input"
            v-model="formData.expect"
            placeholder="请输入合作预期"
            placeholder-class="input-placeholder"
          />
       </view>
    </view>

    <!-- 底部提交按钮 -->
    <view class="submit-section">
      <button class="submit-btn" @click="submitForm">提交</button>
    </view>
  </view>

  <!-- 成功提交弹窗 -->
  <!-- <view v-if="showSuccessModal" class="modal-overlay" @click="closeSuccessModal">
    <view class="modal-content" @click.stop>
      <view class="modal-header">
        <text class="modal-title">提示信息</text>
        <view class="modal-close" @click="closeSuccessModal">
          <text class="close-icon">×</text>
        </view>
      </view>
      <view class="modal-body">
        <text class="success-title">提交成功</text>
        <text class="success-desc">我们将尽快与你取得联系，请耐心等待</text>
      </view>
      <view class="modal-footer">
        <button class="confirm-btn" @click="closeSuccessModal">知道了</button>
      </view>
    </view>
  </view> -->
  <!-- 公共弹窗组件 -->
   <view v-if="showSuccessModal"> 
      <PublicPopup 
      :visible="popupVisible"
      :topTitle="popupConfig.topTitle"
      :title="popupConfig.title"
      :description="popupConfig.description"
      :confirmText="popupConfig.confirmText"
      :cancelText="popupConfig.cancelText"
      :showCancel="popupConfig.showCancel"
      :showConfirm="popupConfig.showConfirm"
      @confirm="handleConfirm"
      @cancel="handleCancel"
    />
   </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import CustomNavBar from '@/components/CustomNavBar.vue'
import PublicPopup from '@/components/PublicPop-up.vue'
import ActivityApi from '@/api/pile/activity.js'
import { onLoad as onPageLoad } from '@dcloudio/uni-app';

// 活动ID
const activityId = ref(null)

// 表单数据
const formData = ref({
  activityId: null,
  companyName: '',
  linkman: '',
  phone: '',
  position: '',
  email: '',
  content: '',
  expect: ''
})

// 弹窗显示状态
const showSuccessModal = ref(false)
const popupVisible = ref(false)
const popupConfig = ref({
  topTitle: '提示信息',
  title: '提交成功',
  description: '我们将尽快与你取得联系，请耐心等待',
  confirmText: '确认',
  cancelText: '知道了',
  showCancel: true,
  showConfirm: false
})

// 处理确认按钮点击
const handleConfirm = () => {
  popupVisible.value = false
  // 返回上一页
  uni.navigateBack()
}

// 处理取消按钮点击
const handleCancel = () => {
  popupVisible.value = false
  uni.navigateBack()
}


onPageLoad((options) => {
  // 接收URL携带的id参数
  activityId.value = options.activityId ? Number(options.activityId) : 1;
  formData.value.activityId = activityId.value
});

// 返回上一页
const goBack = () => {
  uni.navigateBack()
}

// 提交表单
const submitForm = async () => {
  // 表单验证
  if (!formData.value.companyName) {
    uni.showToast({
      title: '请输入合作单位名称',
      icon: 'none'
    })
    return
  }

  if (!formData.value.linkman) {
    uni.showToast({
      title: '请输入联系人',
      icon: 'none'
    })
    return
  }

  if (!formData.value.phone) {
    uni.showToast({
      title: '请输入手机号码',
      icon: 'none'
    })
    return
  }

  // 手机号格式验证
  // const phoneReg = /^1[3-9]\d{9}$/
  // if (!phoneReg.test(formData.value.phone)) {
  //   uni.showToast({
  //     title: '请输入正确的手机号码',
  //     icon: 'none'
  //   })
  //   return
  // }

  if (!formData.value.content) {
    uni.showToast({
      title: '请输入合作内容',
      icon: 'none'
    })
    return
  }

  // 邮箱格式验证（如果填写了邮箱）
  // if (formData.value.email) {
  //   const emailReg = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
  //   if (!emailReg.test(formData.value.email)) {
  //     uni.showToast({
  //       title: '请输入正确的邮箱格式',
  //       icon: 'none'
  //     })
  //     return
  //   }
  // }

  try {
    // 显示加载提示
    uni.showLoading({
      title: '提交中...'
    })

    // 调用API提交数据
    await ActivityApi.applyCooperation(formData.value)
    
    uni.hideLoading()
    
    // 显示成功弹窗
    showSuccessModal.value = true
    popupVisible.value = true
  } catch (error) {
    uni.hideLoading()
    console.error('提交合作申请失败:', error)
    uni.showToast({
      title: '提交失败，请重试',
      icon: 'none'
    })
  }
}

// 关闭成功弹窗
const closeSuccessModal = () => {
  showSuccessModal.value = false
  uni.navigateBack()
}
</script>

<style scoped>
.cooperation-page {
  min-height: 100vh;
  background-color: white;
  display: flex;
  flex-direction: column;
}

/* 顶部导航 */
.nav-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 30rpx;
  background-color: #fff;
  border-bottom: 1rpx solid #f0f0f0;
}

.nav-back {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.nav-placeholder {
  width: 60rpx;
}

/* 内容区域 */
.content {
  flex: 1;
  padding: 0 30rpx;
}

/* 欢迎区域 */
.welcome-section {
  padding: 40rpx 0 30rpx;
  text-align: center;

}

.welcome-subtitle {
  font-size: 28rpx;
  color: #666;
  display: block;
  margin-bottom: 20rpx;
  letter-spacing: 2rpx;
}

.welcome-title {
  font-size: 45rpx;
  font-weight: bold;
  color: black;
  letter-spacing: 4rpx;
}

/* 表单区域 */
.form-section {
  background-color: #fff;
  border-radius: 20rpx;
  padding: 20rpx 30rpx;
  margin-bottom: 30rpx;
}

.form-item {
  display: flex;
  align-items: center;
  padding: 30rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
}

.form-item:last-child {
 border-bottom: 1rpx solid #f0f0f0;
}

.form-label {
  width: 200rpx;
  font-size: 28rpx;
  color: #666;
  flex-shrink: 0;
}

.form-input {
  flex: 1;
  font-size: 28rpx;
  color: #333;
  text-align: right;
}

.input-placeholder {
  color: #ccc;
  font-size: 28rpx;
}

/* 文本域区域 */
.textarea-section {
  background: linear-gradient(to right,#E8F8F6 , #fff, #E8F8F6 );
  /* background-color: #E8F8F6 ; */
  border-radius: 20rpx;
  margin-bottom: 30rpx;
  overflow: hidden;
  position: relative;
}

.textarea-header {
  /* background-color: #f8f9fa; */
  /* padding: 25rpx 25rpx 10rpx 25rpx; */
  /* border-bottom: 1rpx solid #f0f0f0; */
  padding:25rpx;
}

.textarea-title {
  font-size: 38rpx;
  font-weight: 550;
  color: #333;
  /* padding: 25rpx 25rpx 10rpx 25rpx; */
}
.expect-title{
  font-size: 30rpx;
  font-weight: 500;
  color: #7A7A7C;
}
.expect-header{
  padding: 20rpx;
}
.expect-input{
  width: 100%;
  min-height: 100rpx;
  color: #333;
  background-color: #f5f5f5;
  border-radius: 10rpx;
  padding: 15rpx;
  border: none;
  outline: none;
  box-sizing: border-box;
}
.textarea-input {
  width: 100%;
  min-height: 300rpx;
  padding: 0rpx 30rpx 10rpx 30rpx;
  font-size: 26rpx;
  color: #333;
  line-height: 1.6;
  border: none;
  outline: none;
  resize: none;
  box-sizing: border-box;
  z-index: 1;
}

.textarea-placeholder {
  /* color: black; */
  font-size: 26rpx;
}

/* 提交按钮区域 */
.submit-section {
  padding: 30rpx;
  background-color: #fff;
  /* border-top: 1rpx solid #f0f0f0; */
}

.submit-btn {
  width: 100%;
  height: 88rpx;
  background: linear-gradient(135deg, #1DCFB7 0%, #17B3A3 100%);
  border-radius: 44rpx;
  font-size: 32rpx;
  font-weight: bold;
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.submit-btn:active {
  opacity: 0.8;
}

/* 汽车图标 */
.car-icon {
  position: absolute;
  bottom: 15rpx;
  right: 20rpx;
  width: 250rpx;
  height: 130rpx;
  z-index: 0;
  /* opacity: 0.6; */
  background-position: bottom bottom;
}

/* 弹窗样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.modal-content {
  width: 600rpx;
  background-color: #fff;
  border-radius: 20rpx;
  overflow: hidden;
  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.2);
}

.modal-header {
  position: relative;
  padding: 40rpx 40rpx 20rpx 40rpx;
  /* text-align: center; */
}

.modal-title {
  font-size: 32rpx;
  font-weight: 500;
  color: black;
}

.modal-close {
  position: absolute;
  top: 20rpx;
  right: 20rpx;
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.close-icon {
  font-size: 40rpx;
  color: #999;
  line-height: 1;
}

.modal-body {
  padding: 20rpx 40rpx 40rpx 40rpx;
  text-align: center;
}

.success-title {
  display: block;
  font-size: 36rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 20rpx;
}

.success-desc {
  display: block;
  font-size: 28rpx;
  color: black;
  line-height: 1.5;
}

.modal-footer {
  padding: 0 40rpx 40rpx 40rpx;
}

.confirm-btn {
  width: 100%;
  height: 80rpx;
  background: linear-gradient(135deg, #1DCFB7 0%, #17B3A3 100%);
  border-radius: 40rpx;
  font-size: 30rpx;
  font-weight: 500;
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.confirm-btn:active {
  opacity: 0.8;
}
</style>
